import { useState } from "react";
import { Input } from "antd";
import DOMPurify from "dompurify";

const { TextArea } = Input;

/**
 * Sanitizes the input data using DOMPurify
 * @param {string | Node} userInput - the input data to be sanitized
 * @returns {string} - the sanitized input data
 */
const cleanData = (userInput) => {
  // Sanitizes the input data using DOMPurify to prevent XSS attacks
  // See https://github.com/cure53/DOMPurify
  return DOMPurify.sanitize(userInput);
};

const Html = () => {
  const [htmlContent, setHtmlContent] = useState("");

  const handleInputChange = (e) => {
    const inputData = e.target.value;
    setHtmlContent(inputData);
  };

  return (
    <div>
      <h2>HTML Редактор</h2>
      <TextArea
        rows={20}
        placeholder="Начните вводить свой текст, для редактирования используйте HTML-тэги"
        value={htmlContent}
        onChange={handleInputChange}
      />
      <div className="text" dangerouslySetInnerHTML={{ __html: cleanData(htmlContent) }} />
    </div>
  );
};

export default Html;
